<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            height: 5000px;
        }
    </style>
</head>

<body>

</body>
<script>
    // 节流  => 降低代码的执行频率(如果在间隔时间内容重复触发 => 不执行任何操作,超出间隔时间才会触发)
    // window.onscroll = function () {
    //     console.log("scrolling");
    // }
    // Date.now();  构造函数Date的静态方法 => 获取当前时间对应的毫秒数
    // 等价于  var date = new Date()   date.getTime();

    //思路=>
    // var start = Date.now();  //页面加载时的时间
    // window.onscroll = function () {
    //     var now = Date.now();  //事件触发时当前时间
    //     if (now - start >= 300) { // 300ms 间隔时间
    //         console.log("scrolling"); //执行的代码
    //         start = now;  // 下次触发时 要比当前时间多300ms
    //     }
    // }
    // 缺点: 1. 声明了一个全局变量 2. 代码无法复用(其他地方用 => 只能重写一个新的)

    //封装好的->
    function throttleFn(callback, delay = 300) {
        var start = Date.now()
        return function () {
            var now = Date.now()  //事件触发时当前时间
            if (now - start >= delay) { // 300ms 间隔时间
                callback.apply(this, arguments)//回调函数的this的指向和参数都依赖于调用的函数
                start = now  // 下次触发时 默认要比当前时间多300ms
            }
        }
    }
    // 函数节流  => 对传入的函数进行节流操作 => 返回新的函数 (调用新函数时 会触发原本的函数 -> 节流触发)
    window.onscroll = throttleFn(function () {
        console.log("scrolling", scrollY); // 滚动时执行的代码
    }, 1000)






</script>

</html>